<template>
	<view class="">
		<!-- <view class="">
			<u-image mode="widthFix" src="https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/swiper/swiper01.png">
			</u-image>
		</view> -->
		<vin @fileList='fileList'></vin>
		<view class="searchBox">
			<u-cell-group>
				<u-cell-item center :value="wzInfo.carType" :value-style="{'color':'#666'}" @click="click" :arrow="true"
					title="车型">

				</u-cell-item>

				<u-cell-item center :value="wzInfo.carPei" :value-style="{'color':'#666'}" @click="click2" :arrow="true"
					title="车牌所在地">
				</u-cell-item>

				<u-cell-item center value="" :arrow="false" title="车牌号">
					<u-input slot="right-icon" v-model="wzInfo.carNumber" input-align="right" type="text"
						@click="checkbrand()" @input="toUppercase2()" placeholder="请输入" maxlength="8" />
					<text style="margin-left: 8px;" slot="right-icon"></text>
				</u-cell-item>

				<u-cell-item center value="" :arrow="false" title="发动机号">
					<u-input slot="right-icon" v-model="wzInfo.carEngineCode" input-align="right" type="text"
						@click="checkbrand()" @blur="vpnGet1()" @input="toUppercase1()" placeholder="请输入"
						maxlength="20" />
					<text style="margin-left: 8px;" slot="right-icon"></text>
				</u-cell-item>

				<u-cell-item center value="" :arrow="false" title="车架号">
					<u-input slot="right-icon" v-model="wzInfo.vin" input-align="right" @click="checkbrand()"
						type="text" @blur="vpnGet()" @input="toUppercase()" placeholder="请输入" maxlength="17" />
				</u-cell-item>
			</u-cell-group>

			<u-picker v-model="show" mode="selector" :range="actionSheetList" range-key="name" @confirm="confirm1">
			</u-picker>
			<!-- <u-picker v-model="show2" mode="selector" :range="cpInfo" @confirm="confirm2"></u-picker> -->
		

			<view class="_flex _justify_center" id="btn">
				<view class="" style="width: 50%;">
					<u-button id="btn" type="primary" @click="getzhck">开始查询</u-button>
				</view>
			</view>
			<view class="" style="margin-top: 40rpx;">
				<u-checkbox-group>
					<u-checkbox active-color="#002B56" v-model="form.checked" shape="circle" @change="uerAgreement">
						<text class="tip">使用本服务意味着您已经阅读并同意</text>
						<text class="tip" style="color: #002B56;" @click="goUserAgreement">《用户协议》</text>
					</u-checkbox>
				</u-checkbox-group>

			</view>
		</view>
	<view class="dbSx1" v-if="show2" @click="dis">
		<view class="dbSx" >
			<view   v-for="item in cpInfo" :key='item' @click.stop="confirm2(item)">
				{{item}}
			</view>
		</view>
	</view>	
	
	</view>
</template>

<script>
	import app from "../../App.vue"
	import API from "@/api/report.js"
	export default {
		data() {
			return {
				wzInfo: {
					carType: '请选择',
					carPei: '请选择',
					carId: '',
					carNumber: '',
					carEngineCode: '',
					vin: '',
				},
				show: false,
				show2: false,
				actionSheetList: [],
				cpInfo: [],
				form: {
					checked: true,
				},
				getInfo: {
					image: "",
				},
				index: 0,

			}
		},
		onShow() {
			this.getIllegalDict()
		},

		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
			toUppercase2(e) {
				this.wzInfo.carNumber = this.wzInfo.carNumber.toUpperCase();
			},
			toUppercase(e) {
				this.wzInfo.vin = this.wzInfo.vin.toUpperCase();
				console.log(this.wzInfo.vin)
			},
			vpnGet(e) {
				this.wzInfo.vin = null;

				this.wzInfo.vin = e.replace(/[\u4E00-\u9FA5]/g, '')

			},
			toUppercase1(e) {
				this.wzInfo.carEngineCode = this.wzInfo.carEngineCode.toUpperCase();
				console.log(this.wzInfo.carEngineCode)
			},
			vpnGet1(e) {
				this.wzInfo.carEngineCode = null;

				this.wzInfo.carEngineCode = e.replace(/[\u4E00-\u9FA5]/g, '')

			},
			checkbrand() {
				if (this.current == 0) {
					if (this.assessInfo.carModel == '请选择') {
						this.$u.toast('请优先选择具体车型');
					}
				}
				if (this.current == 1) {
					if (this.assessInfo2.carModel == '请选择') {
						this.$u.toast('请优先选择具体车型');
					}
				}

			},
			click() {
				this.show = true
			},
			confirm1(e) {

				this.wzInfo.carType = this.actionSheetList[e].name
				this.wzInfo.carId = this.actionSheetList[e].val
			},
			click2() {
				this.show2 = true
			},
			dis(){
				this.show2 = false
			},
			confirm2(e) {
				console.log(e)
				this.wzInfo.carPei = e;
				this.show2 = false
			},
			//查询字典
			getIllegalDict() {
				let token = uni.getStorage({
					token: token
				})
				API.queryDictionary({
					token
				}).then(res => {
					this.actionSheetList = res.data.carTypeMap
					this.cpInfo = res.data.preCarList
				})
			},
			getOcrInfo(image) {
				console.log(image);
				let data = {
					image: image,
				}
				API.getOcrInfo(data).then(res => {
					console.log(res);
					if (res.code == 200) {
						this.wzInfo.vin = res.data.vin
						this.wzInfo.carPei = res.data.preCar
						this.wzInfo.carNumber = res.data.carNumber
						this.wzInfo.carEngineCode = res.data.carEngineCode
					} else {
						this.$u.toast('获取VIN码失败');
					}
				})
			},
			// 切换城市code
			fileList(fileList) {
				this.getInfo.image = fileList
				console.log("从组建获取的列表")
				console.log(this.getInfo.image)
				this.getOcrInfo(this.getInfo.image)
			},
			getzhck() {
				if (!this.getInfo.image) {
					if (!this.wzInfo.vin) {
						this.$u.toast('请先输入车架号');
						return false
					}
					if (this.wzInfo.carType == '请选择') {
						this.$u.toast('请输入车辆类型');
						return false
					}
					if (this.wzInfo.carPei == '请选择') {
						this.$u.toast('请输入车牌所在地');
						return false
					}
					if (!this.wzInfo.carNumber) {
						this.$u.toast('请先输入车牌号');
						return false
					}
					if (!this.wzInfo.carEngineCode) {
						this.$u.toast('请先输入发动机号');
						return false
					}
				} else {
					if (this.wzInfo.carType == '请选择') {
						this.$u.toast('请输入车辆类型');
						return false
					}
				}
				// if (!this.wzInfo.vin) {
				// 	this.$u.toast('请先输入VIN码');
				// 	return false
				// }
				// if (this.wzInfo.carType=='请选择') {
				// 	this.$u.toast('请输入车辆类型');
				// 	return false
				// }
				//正则表达式
				let reg_chassis = /^[A-HJ-NPR-Z\d]{17}$/; //车架号
				let sign_chassis = RegExp(reg_chassis).test(this.getInfo.vin);
				if (this.getInfo.vin && !sign_chassis) {
					this.$u.toast('请输入17位有大写字母和数字组成VIN码');
					return false
				}
				if (this.form.checked == false) {
					this.$u.toast('请阅读并同意用户协议！');
					return false
				}

				let data = {
					preCar: this.wzInfo.carPei, //车牌第一个字
					carNumber: this.wzInfo.carNumber, //车牌除第一个字外
					carCode: this.wzInfo.vin, //车架号
					carEngineCode: this.wzInfo.carEngineCode, //发动机号
					carType: this.wzInfo.carId //车辆类型
				}
				API.violationQuery(data).then(res => {
					console.log(res)
					if (res.code == 200) {
						let resultData = JSON.stringify(res)
						uni.navigateTo({
							url: './violationResult?data=' + resultData
						})
					}
				})

			},
			toUppercase(e) {
				this.wzInfo.vin = this.wzInfo.vin.toUpperCase();
				console.log(this.wzInfo.vin)
			},
			vpnGet(e) {
				this.wzInfo.vin = null;
				this.wzInfo.vin = e.replace(/[\u4E00-\u9FA5]/g, '')
				if (e.length == 17) {
					API.getVin({
						vin: e
					}).then(res => {
						console.log(res)
						if (res.data.isHaveVin) {
							this.carInfoJson = res.data
							this.assessInfo.carModel = res.data.modelName
							this.assessInfo.seriesId = res.data.seriesId
							this.assessInfo.brandId = res.data.brandId
							this.assessInfo.modelId = res.data.modelId
							this.assessInfo.color = res.data.color

						} else {

							this.$u.toast(res.message || '请输入17位车架号');
							this.isHaveVin = false;
							return false
						}
					})
				} else {
					this.$u.toast('请输入17位车架号');
				}
			},

			goUserAgreement() {
				uni.navigateTo({
					url: "/pages/login/userAgreement"
				})
			},
			uerAgreement(e) {
				console.log(e);
				this.form.checked = e.value;
			},
		}
	}
</script>

<style scoped lang="scss">
	.dbSx1{
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.6);
		    z-index: 10073;
		position: absolute;
		top: 0;
		z-index: 1111;
	}
	.dbSx{
		background-color: #d0d4d7;
		padding: 15rpx;
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 111;
	}
	#btn {
		background-color: #002A58;
		color: #FFFFFF;
		width: 600rpx;
		border-radius: 12rpx;
		margin: 40rpx auto 0;
	}

	.searchBox {
		padding: $uni-widthspace;

		.searchContext {
			background: #F4F6F5;
			display: flex;
			padding: 0 24rpx;
			border-radius: 15rpx;
			box-sizing: border-box;
			font-size: 40rpx;
			color: #002B56;
			margin-bottom: $uni-widthspace;
		}
	}

	.tip {
		font-size: 24rpx;
	}
	.dbSx {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.dbSx view{
		background: #fff;
		margin: 7rpx;
		width: 105rpx;
		height: 78rpx;
		border-radius: 10rpx;
		line-height: 78rpx;
		text-align: center;
	}
	.dbSx view:nth-child(1),.dbSx view:nth-child(2),.dbSx view:nth-child(3),.dbSx view:nth-child(4){
		width: 168rpx;
	}
	.dbSx view:nth-child(31),.dbSx view:nth-child(30),.dbSx view:nth-child(29),{
		width: 226rpx;
	}
</style>
